<template>
  <div class="page">
    <navigation>手机号验证</navigation>
    <div class="yanzheng">
      <ul>
        <li>
          <span class="input-areacode fl">
            +{{ areacode }}
            <select v-model="areacode" name="nativePhoneCodeSelector" class="native-phone-code-select">
              <option v-for="item in codeList" :key="item.code" :value="item.code">{{ `+${item.code} ${item.area}` }}</option>
            </select>
          </span>
          <input v-model="phone" tpye="text" placeholder="请输入手机号" />
          <span v-if="loading" class="huoqu">发送中...</span>
          <a v-else-if="count === 60" href="javascript:;" class="huoqu" @click="handleSendCode">获取验证码</a>
          <span v-else class="huoqu">{{ count }}</span>
        </li>
        <li><input v-model="varcode" tpye="text" placeholder="请输入验证码" /></li>
        <li>
          <input v-model="password" :type="showPassword ? 'text' : 'password'" placeholder="请输入用户密码" />
          <a href="javascript:;" @click="showPassword = !showPassword">
            <i class="iconfont" :class="showPassword ? 'icon-htmal5icon09' : 'icon-htmal5icon08'"></i>
          </a>
        </li>
        <p>如果长时间未接收到验证码，请检查短信是否被拦截。</p>
      </ul>
      <a href="javascript:;" class="wancheng" @click="send">完成</a>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import { AREA_CODE } from '@/constants/area-code'
import { isPhoneNumber, isPassword } from '@/utils/validate'
import navigation from '@/components/Navigation.vue'
let timerId
export default {
  components: { navigation },
  data () {
    return {
      showPassword: false,
      codeList: AREA_CODE,
      phone: '',
      varcode: '',
      password: '',
      areacode: '86',
      loading: false,
      count: 60
    }
  },
  methods: {
    ...mapActions({
      sendSms: 'auth/sendSms',
      bindPhone: 'auth/bindPhone'
    }),
    resetCount () {
      this.count = 60
      clearInterval(timerId)
    },
    countdown () {
      this.resetCount()
      this.count--
      timerId = setInterval(() => {
        this.count--
        if (this.count === 0) {
          this.resetCount()
        }
      }, 1000)
    },
    handleSendCode () {
      do {
        if (this.phone === '') {
          this.errmsg = '请输入手机号'
          break
        }
        if (!isPhoneNumber(this.phone)) {
          this.errmsg = '请输入正确手机号'
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const payload = {
        type: 3,
        mobile_phone: this.phone,
        area_code: this.areacode
      }
      this.sendSms(payload)
        .then((data) => {
          this.countdown()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
    },
    send () {
      do {
        if (this.phone === '') {
          this.errmsg = '请输入手机号'
          break
        }
        if (!isPhoneNumber(this.phone)) {
          this.errmsg = '请输入正确手机号'
          break
        }
        if (this.varcode === '') {
          this.errmsg = '请输入手机验证码'
          break
        }
        if (!isPassword(this.password)) {
          this.errmsg = '密码由6-20个数字、26个英文字母或者下划线组成'
          break
        }
      } while (false)
      if (this.errmsg) {
        this.$toast.error(this.errmsg)
        this.errmsg = ''
        return
      }
      const payload = {
        password: this.password,
        phone: this.phone,
        varcode: this.varcode
      }
      this.bindPhone(payload)
        .then((data) => {
          this.$toast.success(data.message)
          this.$router.back()
        })
        .catch((data) => {
          this.$toast.error(data.message)
        })
    }
  }
}
</script>
<style scoped>
.input-areacode {
  position: relative;
  color: #1b8afe;
  margin: 0 10px 0 0;
  width: 30px;
  text-align: center;
  font-size: 16px;
}
.input-areacode .native-phone-code-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
</style>
